{% extends "admin/layout.html" %}

{% block content %}
<!-- Page Wrapper -->
<div id="wrapper">

{% include "admin/_slidebar.html"%}

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

  <!-- Main Content -->
  <div id="content">

    {% include "admin/_topbar.html"%}

    <!-- Begin Page Content -->
    <div class="container-fluid">
      {% include 'admin/_messages.html' %}

      <!-- DataTales Example -->
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <a class="m-0 font-weight-bold text-primary">DataTables User </a>
          <a class="add" title="Add User" data-toggle="modal" data-target="#addUser" href="#" style="float: right;"><i class="material-icons" style="float: right;">&#xE03B;</i></a>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Username</th>
                  <th>Name</th>
                  <th>Address</th>
                  <th>Phone Number</th>
                  <th>Role</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for user in users %}
                    <tr>
                      <td>{{user.id}}</td>
                      <td>{{user.username}}</td>
                      <td>{{user.name}}</td>
                      <td>{{user.address}}</td>
                      <td>{{user.phone_number}}</td>
                        {% if user.is_admin %}
                            <td>Admin</td>
                        {% else %}
                            <td>User</td>
                        {% endif %}
                      <td>
                        {% if user.is_admin == 0 %}
                         <a class="edit" title="Edit" data-toggle="modal" data-target="#editUser" data-user-id={{user.id}} data-username="{{user.username}}" data-name="{{user.name}}" data-address="{{user.address}}" data-phone="{{user.phone_number}}" data-is_admin="{{user.is_admin}}" href="#"><i class="material-icons">&#xE254;</i></a>
                         <a class="delete" title="Delete" data-toggle="modal" data-target="#deleteUserModal" data-user-id={{user.id}} href="#" ><i class="material-icons">&#xE872;</i></a>
                        {% endif %}
                      </td>
<!--                      data-toggle="modal" data-target="#logoutModal"-->

                    </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!-- /.container-fluid -->

  </div>
  <!-- End of Main Content -->

  {% include 'admin/_footer.html' %}

</div>
<!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
    <div class="modal-footer">
      <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
      <a class="btn btn-primary" href="{{ url_for('logout') }}">Logout</a>
    </div>
  </div>
</div>
</div>

<!--add user modal-->
  <div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add User</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="add-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.add_user')}}" method="post" id="add-form">
        {{add_form.csrf_token()}}
      <div class="modal-body">
        <div class="form-group">
			<div class="input-group">
            {{add_form.username(class_="form-control", placeholder="Username")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_form.name(class_="form-control", placeholder="Name")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_form.address(class_="form-control", placeholder="Address")}}
            </div>
        </div>
        <div class="form-group" >
			<div class="input-group">
            {{add_form.phone_number(class_="form-control", pattern= '^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$', placeholder="Phone Number")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
              {{add_form.password(class_="form-control", placeholder="Password")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{add_form.confirm(class_="form-control", placeholder="Confirm Password")}}
            </div>
        </div>
        <div class="form-group">

            {% for subfield in add_form.is_admin %}
                <tr>
                    <td>{{ subfield }}</td>
                    <td>{{ subfield.label }}</td>
                </tr>
            {% endfor %}
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="add-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>


<!--edit user modal-->
  <div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="edit-x">×</span>
        </button>
      </div>
      <form action="{{url_for('admin.edit_user')}}" method="post" id="edit-form">
        {{edit_form.csrf_token()}}
      <div class="modal-body">

        {{edit_form.user_id(value="")}}
        <div class="form-group" id="user_id">
          ID:
        </div>
        <input type="hidden" name="username" id="username" value="">
        <div class="form-group" id="username">
          Username:
        </div>
        <div class="form-group">
            <div>Name: </div>
			<div class="input-group">
            {{edit_form.name(class_="form-control", id="edit-name", placeholder="Name")}}
            </div>
        </div>
        <div class="form-group">
            <div>Address: </div>
			<div class="input-group">
            {{edit_form.address(class_="form-control", id="edit-address", placeholder="Address")}}
            </div>
        </div>
        <div class="form-group" >
            <div>Phone Number: </div>
			<div class="input-group">
            {{edit_form.phone_number(class_="form-control", id="edit-phone_number", pattern= '^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$', placeholder="Phone Number")}}
            </div>
        </div>
        <div class="form-group">
          {% for subfield in edit_form.is_admin %}
            <tr>
                <td>{{ subfield }}</td>
                <td>{{ subfield.label }}</td>
            </tr>
          {% endfor %}
        </div>
        <div class="form-group" >
                <tr>
                <td>{{edit_form.edit_password(id="check-edit-password")}}</td>
                <td>Edit Password</td>
                </tr>
        </div>
        <div class="form-group">
			<div class="input-group">
              {{edit_form.password(class_="form-control", id="edit-password", placeholder="Password", disabled="disabled")}}
            </div>
        </div>
        <div class="form-group">
			<div class="input-group">
            {{edit_form.confirm(class_="form-control", id="edit-confirm", placeholder="Confirm Password", disabled="disabled")}}
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="edit-cancel">Cancel</button>
<!--        <a class="btn btn-primary" id="edit-form-submit" name="save" href="" >Save </a>-->
<!--        <button class="btn btn-primary" type="submit" data-dismiss="modal" href="">Save</button>-->
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>
    </div>
    </div>
  </div>

<!--delete user modal-->
  <div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Select "Confirm" below if you want to delete user.
        <input type="hidden" name="user_id" id="user_id" value="">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" name="confirm" href="" >Confirm </a>
      </div>
    </div>
    </div>
  </div>
<script src="{{url_for('static', filename='users_list.js')}}"></script>
{% endblock %}